<template>
	<div>
		<view class="mask" v-if="isShow" />
		<div class="poster" v-if="isShow">
			<div class="poster-close" @click="onClose"></div>
			<!-- <div :style="[imgStyl]"> -->
				<image  :src="posterSrc" style="width: 460upx;" show-menu-by-longpress class="poster-img" mode="widthFix"></image>
			<!-- </div> -->
			<div class="poster-save" @click="onSave"> <span class="icon"></span> 保存图片</div>
		</div>
		<div class="poster-canvas">
			<canvas class="canvas_box" type="2d" :data-name="drawData.canvasData.name" :style="[canvasSty]" canvas-id="poster" :id="drawData.canvasData.id"></canvas>
		</div>
	</div>
</template>

<script>
	// import Overlay from '../../wxcomponents/vant/overlay/index'
	import Draw from '@/utils/draw'
	import {
		deepClone
	} from '@/utils'
	export default {
		props: {
			drawData: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				canvasData: {},
				posterSrc: '',
				isShow:false
			}
		},
		// components: {
		// 	Overlay
		// },
		computed: {
			imgStyl() {
				const {
					drawData: {
						canvasData
					}
				} = this
				return {
					width: `${uni.upx2px(canvasData.width)}px`,
					height: `${uni.upx2px(canvasData.height)}px`
				}
			},
			canvasSty() {
				const {
					drawData: {
						canvasData
					}
				} = this
				return {
					width: `${canvasData.width}px`,
					height: `${canvasData.height}px`
				}
			}
		},
		mounted() {
			// if(this.drawData.canvasData){
			// 	console.log(1111,'pp')
			// 	this.initCtx()
			// }
		},
		created() {},
		methods: {
			initCtx() {
				const query = uni.createSelectorQuery().in(this)
				query.select(`#${this.drawData.canvasData.id}`)
					.fields({
						node: true,
						size: true
					})
					.exec((res) => {
						const width = res[0].width
						const height = res[0].height
						const canvas = res[0].node
						const ctx = canvas.getContext('2d')
						const dpr = uni.getSystemInfoSync().pixelRatio
						canvas.width = width * dpr
						canvas.height = height * dpr
						ctx.scale(dpr, dpr)
						this.canvas = canvas
						this.draw = new Draw(canvas, ctx)
						uni.loadFontFace({
							global: true,
							family: 'WDCH-Regular',
							source: 'url("https://magic.mirror.source.axeastro.com/font/WDCH.ttf")',
							scopes: ["webview", "native"],
							success: function (res) {
								console.log("字体加载完成")
							},
							fail: function (res) {
								console.log("字体加载失败")
							},
							complete:(res) => {
									// console.log(res.status);
								this.rander(canvas, ctx)
							}
						});
					})
			},
			async rander() {
				const res = await this.draw.createPoster(this.drawData)
				this.posterSrc = res
				// this.isShow = true
				this.onSave()
			},
			onClose(){
				this.isShow = false
				this.posterSrc = ''
			},
			onSave() {
				const copySrc = deepClone({
					src: this.posterSrc
				})
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success: (r) => {
									this.handleSaveFile(copySrc)
								},
								fail: (e) => {
									uni.showModal({
										content: '检测到您没打开保存图片功能权限，是否去设置打开？',
										confirmText: "确认",
										cancelText: "取消",
										success: function(res) {
											if (res.confirm) {
												wx.openSetting({
													success: (res) => {
														console.log(res);
													}
												})
											} else {
												console.log('用户点击取消')
											}
										}
									});
								}
							})
						} else {
							this.handleSaveFile(copySrc)
						}
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			
			handleSaveFile({
				src
			}) {
				const filePath = wx.env.USER_DATA_PATH + '/code.png'
				let sm = uni.getFileSystemManager()
				sm.writeFile({
					filePath,
					data: src.slice(22),
					encoding: 'base64',
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath,
							success: () => {
								uni.showToast({
									title: '保存成功'
								})
							},
							fail: (err) => {
								console.log(err);
							}
						})
					}
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
.mask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .8);
}
	.poster {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 10000;
		&-close{
			position: absolute;
			z-index: 100;
			top: -62.5upx;
			right: -32.5upx;
			width: 65upx;
			height: 65upx;
			background-image: url(https://content.daylucky.cn/admin/image/pg09q2cg551irdq5847ufixb.png);
			background-size: contain;
			background-position: center center;
			background-repeat: no-repeat;
			
		}
		&-img {
			width: 100%;
			height: 100%;
		}
		
		&-save {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 28upx;
			color: #fff;
			line-height: 36upx;
			padding-top: 40upx;

			.icon {
				display: block;
				width: 44upx;
				height: 40upx;
				background-image: url(http://content.astro90.com/mini-poster-download%402x.png);
				background-size: contain;
				background-position: center center;
				background-repeat: no-repeat;
				margin-bottom: 14upx;
			}
		}

		&-canvas {
			position: fixed;
			top: -99990px;
			left: -99990px;
			z-index: -1;
			width: 0;
			height: 0;
			.canvas_box{
				font-family: WDCH-Regular, WDCH;
				position: fixed;
				top: -99990px;
				left: -99990px;
			}
		}
	}
</style>
